<template>
  <div class="child">
    <ul>
      <li v-for="p in list" :key="p.id">
        {{ p.name }} -- {{ p.age }}
      </li>
    </ul>
  </div>
</template>

<!-- Vue2 -->
<!-- <script>
export default {
  props: {
    // list: null
    // list: Array,

    // 数组类型
    list: {
      type: Array,
      required: true,
      default: () => [{id: 123, name: 'test'}]
    },
    // 基本类型
    num: {
      type: Number,
      default: 123
    },
    // 对象类型
    obj: {
      type: Object,
      default: () => {
        return {id: 123, name: 'test'}
      }
    },
    // 函数类型
    fn: {
      type: Function,
      default: () => {
        console.log(123)
      }
    }
  },
  mounted() {
    console.log(this.list)
  }
}
</script> -->

<!-- Vue3 -->
<script lang="ts" setup name="Person">

  import {type Persons} from '@/types'
  
  // defineProps(['list']);
  // const propParam = defineProps<{list: Array<object>}>();
  const propParam = withDefaults(defineProps<{list?:Persons}>(), {
    list: () => [{id:'ausydgyu01',name:'康师傅·王麻子·特仑苏',age:19}]
  })
  
  // console.log(propParam)
</script>

<style scoped>
  .person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
  button {
    margin: 0 5px;
  }
  li {
    font-size: 20px;
  }
</style>